import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Rectangle {
    id: root
    color: '#080D16'

    signal navButtonClicked(string buttonId)

    Component.onCompleted: {
        navButtonClicked('home')
    }

    ButtonGroup {
        id: buttonGroup
    }

    ColumnLayout {
        anchors.fill: parent
        anchors.topMargin: 33
        anchors.bottomMargin: 33
        spacing: 0

        RowLayout {
            Layout.leftMargin: 30
            Layout.bottomMargin: 44
            spacing: 27

            Image {
                id: navMenu
                Layout.preferredWidth: 18
                Layout.preferredHeight: 12
                Layout.alignment: Qt.AlignVCenter
                source: './resources/images/menu.png'

            }

            Image {
                id: logo
                Layout.preferredWidth: 63
                Layout.preferredHeight: 18
                Layout.alignment: Qt.AlignVCenter
                source: './resources/images/logo.png'
            }

            Item {
                Layout.fillWidth: true
            }
        }

        ScrollView {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.bottomMargin: 44
            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff

            ListView {
                anchors.fill: parent
                boundsBehavior: Flickable.StopAtBounds

                model: ListModel {
                    ListElement {
                        icon: './resources/images/home.png'
                        text: qsTr('Home')
                        buttonId: 'home'
                    }
                    ListElement {
                        icon: './resources/images/featured.png'
                        text: qsTr('Featured')
                        buttonId: 'featured'
                    }
                    ListElement {
                        icon: './resources/images/hot.png'
                        text: qsTr('Hot')
                        buttonId: 'hot'
                    }
                    ListElement {
                        icon: './resources/images/movie.png'
                        text: qsTr('Movie')
                        buttonId: 'movie'
                    }
                    ListElement {
                        icon: './resources/images/variety_show.png'
                        text: qsTr('Variety Show')
                        buttonId: 'variety_show'
                    }
                    ListElement {
                        icon: './resources/images/online_course.png'
                        text: qsTr('Online Course')
                        buttonId: 'online_course'
                    }
                    ListElement {
                        icon: './resources/images/music.png'
                        text: qsTr('Music')
                        buttonId: 'music'
                    }
                    ListElement {
                        icon: './resources/images/game.png'
                        text: qsTr('Game')
                        buttonId: 'game'
                    }
                    ListElement {
                        icon: './resources/images/sports.png'
                        text: qsTr('Sports')
                        buttonId: 'sports'
                    }
                    ListElement {
                        icon: './resources/images/fashion.png'
                        text: qsTr('Fashion')
                        buttonId: 'fashion'
                    }
                    ListElement {
                        icon: './resources/images/art_design.png'
                        text: qsTr('Art & Design')
                        buttonId: 'art_design'
                    }
                    ListElement {
                        icon: './resources/images/food.png'
                        text: qsTr('Food')
                        buttonId: 'food'
                    }
                    ListElement {
                        icon: './resources/images/new.png'
                        text: qsTr('New')
                        buttonId: 'new'
                    }
                    ListElement {
                        icon: './resources/images/child.png'
                        text: qsTr('Child')
                        buttonId: 'child'
                    }
                    ListElement {
                        icon: './resources/images/comedy.png'
                        text: qsTr('Comedy')
                        buttonId: 'comedy'
                    }
                    ListElement {
                        icon: './resources/images/all_channels.png'
                        text: qsTr('All Channels')
                        buttonId: 'all_channels'
                    }
                }

                delegate: NavigationButton {
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 44
                    Layout.alignment: Qt.AlignLeft
                    ButtonGroup.group: buttonGroup
                    icon.source: model.icon
                    text: model.text
                    checked: index === 0

                    onClicked: {
                        navButtonClicked(buttonId)
                    }
                }

            }
        }

        NavigationButton {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 44
            Layout.alignment: Qt.AlignLeft
            ButtonGroup.group: buttonGroup
            icon.source: './resources/images/download.png'
            text: qsTr('Download')

            onClicked: {
                navButtonClicked('download')
            }
        }

        NavigationButton {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 44
            Layout.alignment: Qt.AlignLeft
            ButtonGroup.group: buttonGroup
            icon.source: './resources/images/history.png'
            text: qsTr('History')

            onClicked: {
                navButtonClicked('history')
            }
        }

        NavigationButton {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 44
            Layout.alignment: Qt.AlignLeft
            ButtonGroup.group: buttonGroup
            icon.source: './resources/images/collect.png'
            text: qsTr('Collect')

            onClicked: {
                navButtonClicked('collect')
            }
        }

        NavigationButton {
            Layout.preferredWidth: 200
            Layout.preferredHeight: 44
            Layout.alignment: Qt.AlignLeft
            ButtonGroup.group: buttonGroup
            icon.source: './resources/images/setting.png'
            text: qsTr('Setting')

            onClicked: {
                navButtonClicked('setting')
            }
        }
    }
}
